<template>
  <div class="tiktokVideo" style="padding: 10px">
    <dt-search ref="search" :label-width="90" :xlBtn='6'>
      <Button type="primary" @click="exportData">导出</Button>
    </dt-search>
    <!-- <div class="tips"><span>提示：根据抖音官方逻辑，前一天的数据会在当天12点生成</span></div> -->
    <div class="tips"><span>
        <Icon type="ios-alert" color="#F2863A" size="24" /> 提示：每周一中午12点会统计当周及上周发布视频的数据</span>
    </div>
    <dt-grid ref="table" :select="{ sort: sortCase }" :page='page' :onFetch='onFetch' />
  </div>
</template>
<script>
  import Column from './components/tiktokVideoColumn'
  import SearchOpt from './components/tiktokVideoSearch'
  import tiktokMgr from "@/biz/tiktok/tiktok";
  export default {
    data() {
      return {
        option: {
          orgIds: [],
        },
        bool1: false,
        bool2: false,
        bool3: false,
        bool4: false,
        page: {
          total: 0,
        },
        sord: ''
      }
    },
    created() {},
    mounted() {
      this.$refs.table.init(this, new Column(this))
      this.$refs.search.init(this.$refs.table, new SearchOpt())
      this.$refs.table.fetch()
    },
    methods: {
      exportData() {
        // params.dto.buildingId = this.$dt.buildInfo().housesId
        this.option.rows = 1000000000
        this.option.page = 1
        this.option.current = 1
        tiktokMgr.exportLog11(this.option)
      },
      onFetch(data) {
        this.option = {
          ...data,
          bool1: this.bool1,
          bool2: this.bool2,
          bool3: this.bool3,
          bool4: this.bool4,
          sord: this.sord
        }
        return tiktokMgr.tiktokReleaseStatistics1(this.option).then(res => {
          this.page.total = res.total
          return res.list
        })
      },
      sortCase(sort) {
        this.sord = sort.order ? sort.order : ''
        if (sort.prop == "_txt_playCount" && sort.order) {
          this.bool1 = true
        } else {
          this.bool1 = false
        }
        if (sort.prop == "_txt_diggCount" && sort.order) {
          this.bool2 = true
        } else {
          this.bool2 = false
        }
        if (sort.prop == "_txt_commentCount" && sort.order) {
          this.bool3 = true
        } else {
          this.bool3 = false
        }
        if (sort.prop == "_txt_shareCount" && sort.order) {
          this.bool4 = true
        } else {
          this.bool4 = false
        }
        this.$refs.table.fetch();
      },
      videoClick(val) {
        window.open(val.shareUrl, "_blank");
      },

    },
  };
</script>

<style lang="scss" scoped>
  .tiktokVideo {
    .tips {
      padding-bottom: 20px;
      padding-left: 20px;

      span {
        display: inline-block;
        background: #FFF9ED;
        padding: 6px 20px;
        // font-size: 12px;
        color: #666;

      }

    }
  }

  .channel-audit {
    padding: 20px;
  }

  .searchBox {
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>